<script setup lang="ts">
import router from "@/router";
import { h } from "vue";
import { RouteRecordRaw, Router } from "vue-router";
import { MenuProps } from "ant-design-vue";
import { useAppStore } from "@/stores/app";

let menuItems = getMenus(router);

function getMenus(router: Router): MenuProps["items"] {
  const layoutRoute = router
    .getRoutes()
    .find((route) => route.name === "Layouts");

  if (!layoutRoute?.children) return [];
  return solveFunctionMenus(layoutRoute.children);
}

function solveFunctionMenus(children: RouteRecordRaw[]): MenuProps["items"] {
  return children
    .filter((route) => !route.meta?.hidden)
    .map((route) => {
      return {
        key: route.path,
        label: route.meta?.title || route.name || "Unnamed",
        icon: route.meta?.icon ? h(route.meta.icon) : undefined,
        children: route.children
          ? solveFunctionMenus(route.children)
          : undefined,
      };
    });
}

const appStore = useAppStore();
function click({ key }: { key: string }) {
  router.push(key);
  appStore.currentRoutePath = [key];
}
</script>

<template>
  <a-menu
    id="my-menu"
    :selectedKeys="appStore.currentRoutePath"
    mode="horizontal"
    :items="menuItems"
    @click="click"
  >
  </a-menu>
</template>

<style lang="less" scoped>
#my-menu {
  line-height: @nav-height;
  background-color: #f4f4f5;
  border-bottom: 0;
  border-right: 1px solid #ddd;
  :deep(.ant-menu-title-content) {
    margin-left: 6px;
  }
}
</style>
